<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">{{goods.name}}-消费者评价</block>
		</cu-custom>
		
		<view v-if="isInit" :style="'height:'+screenHeight+'px;margin-bottom:'+(bottomHeight+10)+'px'">
					
			<mescroll-uni ref="mescrollRef" :fixed="false" top="0" :bottom="0"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
									
				<mescroll-empty v-if="emptyList"></mescroll-empty>
				
				<view class="cu-card case">
					<!-- 评价部分 begin -->					
						<view class="cu-item shadow" v-if="list.length>0">
						
							<view v-for="(item,index) in list" :key="index" class="padding-sm solid-bottom padding-lr">								
								<commentItem :item="item"></commentItem>							
							</view>
							
						</view>
					<!-- 评价部分 end -->
				</view>
				
			</mescroll-uni>
				
			<!-- 操作条部分 begin -->
			<view class="cu-bar flex justify-center bg-white tabbar shop foot solids-top">
				<button v-if="!goods.isComment" @tap="goCommentSubmit()" class="cu-btn round bg-blue">新增评价帮助其他的人</button>
				<text v-else>您已经评价过 {{goods.name}} ,非常感谢!!!</text>
			</view>
			<!-- 操作条部分 end -->
		
		</view>
		<view class="cu-load load-modal" v-else-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本
	import {mapGetters} from 'vuex'
	import commentItem from '@/components/comment/comment-goods-item.vue';
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBody,commentItem
		},
		data() {
			return {
				screenHeight:this.s_h_notb,
				bottomHeight:this.StatusBarBottom,
				id:0,
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无景点评价',
					},
					textNoMore:'-- 没有更多评价 --',
					toTop:{
						offset:200,
						bottom: '210rpx',
					}
				},
				isInit:false,
				list:[],
			}
		},
		onLoad(option) {
			//更新类型时返回
			if(option.id){
				this.id=option.id
			}
			setTimeout(()=>this.isInit=true,500)
		},
		onShow(){
			if(this.mescroll){
				this.mescroll.resetUpScroll();
			}
			this.$api.post('/goods/has_comment',{id:this.id}).then(res => {
				this.scenery.isComment=res.data
			})
		},
		computed:{
			...mapGetters({'goods':'goods','gps':'loadStoreGps'}),
		},
		methods: {
			goCommentSubmit(){
				uni.navigateTo({
					url:"/pages/goods/comment_submit?id="+this.id
				})
			},
			//页面数据请求事件
			upCallback(page) {
				let _this=this
				let pageNum = page.num; // 页码, 默认从1开始
				
				let params={
					"p":pageNum,
					"id":this.id,
				}				
				_this.$api.post('/goods/page_comment',params).then(res => {
					let data=res.data;
					
					let curPageData = data.records;
					let curPageLen=curPageData.length
					let totalSize=data.total;
					
					if(page.num == 1) _this.list = []; //如果是第一页需手动置空列表
					_this.list = _this.list.concat(curPageData); //追加新数据
											
					_this.mescroll.endBySize(curPageLen, totalSize);
				})
			},
		}		
	}
</script>

<style scoped>
</style>